<template>
  <div class="q-pa-sm">
    <div class="q-gutter-y-md">
      <ScrollArea :bot-margin="120">
        <q-form>

          <slot></slot>
        </q-form>
        </ScrollArea>

      <footer class="footer">
        <q-card-actions class="justify-evenly q-pa-md">
          <q-btn
          class="blue-btn"
          label="Cancel"
          type="submit"
          @click="clickBtn1"
          />
          <q-btn
          label="Submit"
          class="q-ml-sm default-btn"
          @click="confirm = true"
          />
          
          <q-dialog  v-model="confirm" >
            <MyDialog title="Confirm" :submit="clickBtn2">
              <q-card-section class="row items-center">
                <span class="q-ml-sm text-body"
                  >Are you sure to submit the form?
                  <br />
                  <span class="text-red">
                    Cannot be edit after create
                  </span>
                </span>
              </q-card-section>
          </MyDialog>
          </q-dialog>
        </q-card-actions>
      </footer>
    </div>
  </div>
</template>

<script setup lang="ts">
import ScrollArea from 'src/components/ScrollArea.vue';
import { ref } from 'vue';
import MyDialog from './MyDialog.vue';

const confirm = ref(false);
const cancel = ref(false);

const props = defineProps<{
  btn1Callback: () => void;
  btn2Callback: () => void;
}>();

async function clickBtn1() {
  props.btn1Callback();
}

function clickBtn2() {
  props.btn2Callback();
}
</script>
<style>
.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  text-align: center;
  height: 100px;
}
</style>
